<template>
  <a-modal
    :title="title"
    :visible="visible"
    :footer="null"
    @cancel="onCancel"
    centered
    :destroyOnClose="true"
  >
    <div class="tree-box">
      <ChooseHousingResources
        :getShowList="getListTrigger"
        :checkable="false"
        :showList="checkedInfo"
        @request="$utils.commonRequest"
      />
      <!-- <template v-if="treeList.length">
        <a-tree
          v-model:expandedKeys="expandedKeys"
          :tree-data="treeList"
          :blockNode="true"
          :selectable="false"
        >
        </a-tree>
      </template> -->
    </div>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  watch,
  computed,
  toRefs,
  nextTick,
} from "vue";
import { ChooseHousingResources } from "bl-common-vue3";

export default defineComponent({
  name: "CheckedHousingRange",
  components: { ChooseHousingResources },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "查看范围",
    },
    // 范围
    checkedInfo: {
      type: Object,
      default: () => ({
        buildId: [],
        villageId: [],
        projectBuild: [],
      }),
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      getListTrigger: 0,
    });

    /** 初始化 */
    const init = () => {
      state.getListTrigger++;
    };
    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          state.getListTrigger = 0;
        }
      }
    );

    /** 关闭弹窗 */
    const onCancel = () => {
      emit("close");
    };

    return {
      ...toRefs(state),
      onCancel,
    };
  },
});
</script>

<style scoped>
.tree-box {
  width: 100%;
  height: 500px;
  overflow: hidden auto;
}
</style>
